<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flat UI Free</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Loading Bootstrap -->
<link href="../../dist/css/vendor/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">

<!-- Loading Flat UI -->
<link href="../../dist/css/flat-ui.css" rel="stylesheet">

<link rel="shortcut icon" href="../../dist/img/favicon.ico">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
      <script src="../../dist/js/vendor/html5shiv.js"></script>
      <script src="../../dist/js/vendor/respond.min.js"></script>
    <![endif]-->
</head>
<body>

	<style>
body {
	padding-bottom: 200px;
}
</style>

	<div class="container">
		<h4>Forms</h4>
		<div class="row">
			<div class="col-md-12">
				<h4>Basic Form</h4>
				<form role="form">
					<legend>Form Legend</legend>
					<div class="form-group">
						<label for="exampleInputEmail1">Email address</label> <input
							type="email" class="form-control" id="exampleInputEmail1"
							placeholder="Enter email">
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">Password</label> <input
							type="password" class="form-control" id="exampleInputPassword1"
							placeholder="Password">
					</div>
					<div class="form-group">
						<label for="exampleInputFile">File input</label> <input
							type="file" id="exampleInputFile">
						<p class="help-block">Example block-level help text here.</p>
					</div>
					<label class="checkbox" for="checkbox1"> <input
						type="checkbox" data-toggle="checkbox" value="" id="checkbox1"
						required> Unchecked
					</label>
					<button type="submit" class="btn btn-default">Submit</button>
				</form>
			</div>
			<!-- /.col-md-12 -->
		</div>
		<!-- /.row -->
		<div class="row">
			<div class="col-md-12">
				<h4>Inline Form</h4>
				<form class="form-inline" role="form">
					<div class="form-group">
						<label class="sr-only" for="exampleInputEmail2">Email
							address</label> <input type="email" class="form-control"
							id="exampleInputEmail2" placeholder="Enter email">
					</div>
					<div class="form-group">
						<label class="sr-only" for="exampleInputPassword2">Password</label>
						<input type="password" class="form-control"
							id="exampleInputPassword2" placeholder="Password">
					</div>
					<div class="form-group">
						<label class="checkbox" for="checkbox2"> <input
							type="checkbox" data-toggle="checkbox" value="" id="checkbox2"
							required> Remember me
						</label>
					</div>
					<button type="submit" class="btn btn-default">Sign in</button>
				</form>
			</div>
			<!-- /.col-md-12 -->
		</div>
		<!-- /.row -->
		<div class="row">
			<div class="col-md-12">
				<h4>Horizontal form</h4>
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label for="inputEmail1" class="col-lg-2 control-label">Email</label>
						<div class="col-lg-10">
							<input type="email" class="form-control" id="inputEmail1"
								placeholder="Email">
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword1" class="col-lg-2 control-label">Password</label>
						<div class="col-lg-10">
							<input type="password" class="form-control" id="inputPassword1"
								placeholder="Password">
						</div>
					</div>
					<div class="form-group">
						<div class="col-lg-offset-2 col-lg-10">
							<label class="checkbox" for="checkbox3"> <input
								type="checkbox" data-toggle="checkbox" value="" id="checkbox3"
								required> Remember me
							</label>
						</div>
					</div>
					<div class="form-group">
						<div class="col-lg-offset-2 col-lg-10">
							<button type="submit" class="btn btn-default">Sign in</button>
						</div>
					</div>
				</form>
			</div>
			<!-- /.col-md-12 -->
		</div>
		<!-- /.row -->
		<div class="row">
			<div class="col-md-12">
				<h4>Inputs</h4>
				<form action="#" class="form">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Text input">
					</div>
					<div class="form-group">
						<textarea class="form-control" rows="3"></textarea>
					</div>
					<div class="form-group">
						<label class="checkbox" for="checkbox4"> <input
							type="checkbox" data-toggle="checkbox" value="" id="checkbox4"
							required checked> Option one is this and that&mdash;be
							sure to include why it's great
						</label> <label class="radio" for="radio4a"> <input type="radio"
							name="optionsRadios" data-toggle="radio" value="" id="radio4a"
							required checked> Option one is this and that&mdash;be
							sure to include why it's great
						</label> <label class="radio" for="radio4b"> <input type="radio"
							name="optionsRadios" data-toggle="radio" value="" id="radio4b"
							required> Option one is this and that&mdash;be sure to
							include why it's great
						</label> <label class="radio" for="radio4c"> <input type="radio"
							name="optionsRadios" data-toggle="radio" value="" id="radio4c"
							required> Option one is this and that&mdash;be sure to
							include why it's great
						</label>
					</div>
					<div class="form-group">
						<label class="checkbox checkbox-inline" for="checkbox5a">
							<input type="checkbox" data-toggle="checkbox" value=""
							id="checkbox5a" required checked> 1
						</label> <label class="checkbox checkbox-inline" for="checkbox5b">
							<input type="checkbox" data-toggle="checkbox" value=""
							id="checkbox5b" required> 2
						</label> <label class="checkbox checkbox-inline" for="checkbox5c">
							<input type="checkbox" data-toggle="checkbox" value=""
							id="checkbox5c" required> 3
						</label>
					</div>
					<div class="form-group">
						<select data-toggle="select"
							class="form-control select select-default">
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</div>
					<div class="form-group">
						<select data-toggle="select" multiple
							class="form-control multiselect multiselect-default mrs mbm">
							<option value="0" selected>1 option</option>
							<option value="1">2 option</option>
							<option value="2" selected>3 option</option>
							<option value="3">4 option</option>
							<option value="4">5 option</option>
						</select>
					</div>
				</form>
			</div>
		</div>
		<!-- /.row -->
		<div class="row">
			<div class="col-md-12">
				<h4>Static control</h4>
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label class="col-lg-2 control-label">Email</label>
						<div class="col-lg-10">
							<p class="form-control-static">email@example.com</p>
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword" class="col-lg-2 control-label">Password</label>
						<div class="col-lg-10">
							<input type="password" class="form-control" id="inputPassword"
								placeholder="Password">
						</div>
					</div>
				</form>
			</div>
		</div>
		<!-- /.row -->
		<div class="row">
			<div class="col-md-12">
				<h4>Disabled Input</h4>
				<form action="#" class="form">
					<div class="form-group">
						<input class="form-control" id="disabledInput" type="text"
							placeholder="Disabled input here..." disabled>
					</div>
				</form>
			</div>
		</div>
		<!-- /.row -->
		<div class="row">
			<div class="col-md-12">
				<h4>Disabled fieldsets</h4>
				<form class="form-inline" role="form">
					<fieldset disabled>
						<div class="form-group">
							<label for="disabledTextInput">Disabled input</label> <input
								type="text" id="disabledTextInput" class="form-control"
								placeholder="Disabled input">
						</div>
						<div class="form-group">
							<label for="disabledSelect">Disabled select menu</label> <select
								id="disabledSelect" class="form-control">
								<option>Disabled select</option>
							</select>
						</div>
						<label class="checkbox checkbox-inline" for="checkbox6"> <input
							type="checkbox" data-toggle="checkbox" value="" id="checkbox6"
							required checked> Can't check this
						</label>
						<button type="submit" class="btn btn-primary">Submit</button>
					</fieldset>
				</form>
			</div>
		</div>
		<!-- /.row -->
		<div class="row">
			<div class="col-md-12">
				<h4>Validation states</h4>
				<div class="form-group has-success">
					<label class="control-label" for="inputSuccess">Input with
						success</label> <input type="text" class="form-control" id="inputSuccess">
				</div>
				<div class="form-group has-warning">
					<label class="control-label" for="inputWarning">Input with
						warning</label> <input type="text" class="form-control" id="inputWarning">
				</div>
				<div class="form-group has-error">
					<label class="control-label" for="inputError">Input with
						error</label> <input type="text" class="form-control" id="inputError">
				</div>
			</div>
		</div>
		<!-- /.row -->
		<div class="row">
			<div class="col-md-12">
				<h4>Control sizing</h4>
				<h6>Height sizing</h6>
				<div class="form-group">
					<input class="form-control input-hg" type="text"
						placeholder=".input-lg">
				</div>
				<div class="form-group">
					<input class="form-control input-lg" type="text"
						placeholder=".input-lg">
				</div>
				<div class="form-group">
					<input class="form-control" type="text" placeholder="Default input">
				</div>
				<div class="form-group">
					<input class="form-control input-sm" type="text"
						placeholder=".input-sm">
				</div>

				<div class="form-group">
					<select data-toggle="select"
						class="form-control select select-default select-hg">
						<optgroup label="Profile">
							<option value="0">My Profile</option>
							<option value="1">My Friends</option>
						</optgroup>
						<optgroup label="System">
							<option value="2">Messages</option>
							<option value="3">My Settings</option>
							<option value="4" class="highlighted">Logout</option>
						</optgroup>
					</select>
				</div>
				<div class="form-group">
					<select data-toggle="select"
						class="form-control select select-default select-lg">
						<optgroup label="Profile">
							<option value="0">My Profile</option>
							<option value="1">My Friends</option>
						</optgroup>
						<optgroup label="System">
							<option value="2">Messages</option>
							<option value="3">My Settings</option>
							<option value="4" class="highlighted">Logout</option>
						</optgroup>
					</select>
				</div>
				<div class="form-group">
					<select data-toggle="select"
						class="form-control select select-default">
						<optgroup label="Profile">
							<option value="0">My Profile</option>
							<option value="1">My Friends</option>
						</optgroup>
						<optgroup label="System">
							<option value="2">Messages</option>
							<option value="3">My Settings</option>
							<option value="4" class="highlighted">Logout</option>
						</optgroup>
					</select>
				</div>
				<div class="form-group">
					<select data-toggle="select"
						class="form-control select select-default select-sm">
						<optgroup label="Profile">
							<option value="0">My Profile</option>
							<option value="1">My Friends</option>
						</optgroup>
						<optgroup label="System">
							<option value="2">Messages</option>
							<option value="3">My Settings</option>
							<option value="4" class="highlighted">Logout</option>
						</optgroup>
					</select>
				</div>
			</div>
		</div>
		<h6>Form group sizing</h6>
		<form class="form-horizontal" role="form">
			<div class="form-group form-group-hg">
				<label class="col-sm-2 control-label" for="formGroupInputHuge">Huge
					label</label>
				<div class="col-sm-10">
					<input class="form-control" type="text" id="formGroupInputHuge"
						placeholder="Huge input">
				</div>
			</div>
			<div class="form-group form-group-lg">
				<label class="col-sm-2 control-label" for="formGroupInputLarge">Large
					label</label>
				<div class="col-sm-10">
					<input class="form-control" type="text" id="formGroupInputLarge"
						placeholder="Large input">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label" for="formGroupInputDefault">Default
					label</label>
				<div class="col-sm-10">
					<input class="form-control" type="text" id="formGroupInputDefault"
						placeholder="Default input">
				</div>
			</div>
			<div class="form-group form-group-sm">
				<label class="col-sm-2 control-label" for="formGroupInputSmall">Small
					label</label>
				<div class="col-sm-10">
					<input class="form-control" type="text" id="formGroupInputSmall"
						placeholder="Small input">
				</div>
			</div>
		</form>
		<h6>Column sizing</h6>
		<div class="row">
			<div class="col-lg-2">
				<div class="form-group">
					<input type="text" class="form-control" placeholder=".col-lg-2">
				</div>
				<!-- /.form-group -->
			</div>
			<div class="col-lg-3">
				<div class="form-group">
					<input type="text" class="form-control" placeholder=".col-lg-3">
				</div>
				<!-- /.form-group -->
			</div>
			<div class="col-lg-4">
				<div class="form-group">
					<input type="text" class="form-control" placeholder=".col-lg-4">
				</div>
				<!-- /.form-group -->
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<h4>Help text</h4>
				<form class="form">
					<input type="text" class="form-control"> <span
						class="help-block">A block of help text that breaks onto a
						new line and may extend beyond one line.</span>
				</form>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<h4>Input groups</h4>
				<h6>Basic example</h6>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon">@</span> <input type="text"
							class="form-control" placeholder="Username">
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control"> <span
							class="input-group-addon">.00</span>
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon">$</span> <input type="text"
							class="form-control"> <span class="input-group-addon">.00</span>
					</div>
				</div>
				<h6>Sizing</h6>
				<div class="form-group">
					<div class="input-group input-group-hg">
						<span class="input-group-addon">@</span> <input type="text"
							class="form-control input-hg" placeholder="Username">
					</div>
				</div>
				<div class="form-group">
					<div class="input-group input-group-lg">
						<span class="input-group-addon">@</span> <input type="text"
							class="form-control input-lg" placeholder="Username">
					</div>
				</div>

				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon">@</span> <input type="text"
							class="form-control" placeholder="Username">
					</div>
				</div>

				<div class="form-group">
					<div class="input-group input-group-sm">
						<span class="input-group-addon">@</span> <input type="text"
							class="form-control" placeholder="Username">
					</div>
				</div>

			</div>
		</div>
		<!-- /.row -->
		<h6>Button addons</h6>
		<div class="row">
			<div class="col-lg-6">
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button">Go!</button>
						</span> <input type="text" class="form-control">
					</div>
					<!-- /input-group -->
				</div>
			</div>
			<!-- /.col-lg-6 -->
			<div class="col-lg-6">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control"> <span
							class="input-group-btn">
							<button class="btn btn-default" type="button">Go!</button>
						</span>
					</div>
					<!-- /input-group -->
				</div>
				<!-- /.form-group -->
			</div>
			<!-- /.col-lg-6 -->
		</div>
		<!-- /.row -->
		<h6>Buttons with dropdowns</h6>
		<div class="row">
			<div class="col-lg-6">
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-btn">
							<button type="button" class="btn btn-default dropdown-toggle"
								data-toggle="dropdown">
								Action <span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</div>
						<!-- /btn-group -->
						<input type="text" class="form-control">
					</div>
					<!-- /input-group -->
				</div>
				<!-- /.form-group -->
			</div>
			<!-- /.col-lg-6 -->
			<div class="col-lg-6">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control">
						<div class="input-group-btn">
							<button type="button" class="btn btn-default dropdown-toggle"
								data-toggle="dropdown">
								Action <span class="caret"></span>
							</button>
							<ul class="dropdown-menu pull-right">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</div>
						<!-- /btn-group -->
					</div>
					<!-- /input-group -->
				</div>
				<!-- /.form-group -->
			</div>
			<!-- /.col-lg-6 -->
		</div>
		<!-- /.row -->
		<h6>Segmented buttons</h6>
		<div class="row">
			<div class="col-lg-6">
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-btn">
							<button tabindex="-1" class="btn btn-default" type="button">Action</button>
							<button tabindex="-1" data-toggle="dropdown"
								class="btn btn-default dropdown-toggle" type="button">
								<span class="caret"></span>
							</button>
							<ul role="menu" class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</div>
						<input type="text" class="form-control">
					</div>
					<!-- /.input-group -->
				</div>
				<!-- /.form-group -->
			</div>
			<!-- /.col-lg-6 -->
			<div class="col-lg-6">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control">
						<div class="input-group-btn">
							<button tabindex="-1" class="btn btn-default" type="button">Action</button>
							<button tabindex="-1" data-toggle="dropdown"
								class="btn btn-default dropdown-toggle" type="button">
								<span class="caret"></span>
							</button>
							<ul role="menu" class="dropdown-menu pull-right">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</div>
					</div>
					<!-- /.input-group -->
				</div>
				<!-- /.form-group -->
			</div>
			<!-- /.col-lg-6 -->
		</div>
		<!-- /.row -->
	</div>
	<!-- /.container -->

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="../../dist/js/vendor/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="../../dist/js/flat-ui.min.js"></script>

	<script src="../assets/js/application.js"></script>

</body>
</html>
